﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>前端练习css2</title>
    <style type="text/css">
        /*背景颜色*/
        .yans {
            height:80px;
            width:100px;
            background-color:blue;
        }
        /*背景图片*/
        .image {
            width: 400px;
            height: 300px;
            background-image: url(images/result.png);
            /*背景图片不平铺*/
            background-repeat: no-repeat;
            /*background-repeat:repeat-x;延x轴平铺
            background-repeat:repeat-y;延y轴平铺
            background-repeat:repeat;平铺*/
            /*可加背景颜色*/
            background-color: #808080;
            /*背景位置-方位名词*/
            /*第二个参数默认是居中center,也可用像素：x y */
            background-position:left center;
        }
        /*案例1*/
        .lixian1 {
            width: 158px;
            height: 41px;
            /*加图片*/
            background-image: url(images/title_sprite.png);
            /*不平铺*/
            background-repeat: no-repeat;
            /*位置*/
            /*background-position:left;*/
            background-position:-30px;
            /*文字居中*/
            line-height: 41px;
            /*文字大小*/
            font-size: 14px;
            /*不加粗*/
            font-weight: 400;
            /*文字往右移*/
            text-indent: 2em;
        }
        a {
            /*链接消除下划线*/
            text-decoration:none;
            /*颜色为黑色*/
            color:#333;
            /*将其转为块元素*/
            display:block;
            /*高与宽*/
            height:41px;
            width:158px;
        }
        a:hover {
            /*鼠标经过时变色*/
            background-color: #808080;
        }
        /*背景图片固定与滚动*/
        .image1 {
            background-image: url(images/background.jpg);
            /*固定*/
            background-attachment: fixed;
            /*滚动*/
            /*background-attachment:scroll;*/
        }
        /*背景复合写法，一般顺序，可随便写*/
        /*background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置*/
    </style>
</head>
<body>
<!--css背景-->
<!--背景颜色-->
    <div class="yans">
        你真好看
    </div>
<!--背景图片-->
    <div class="image">

    </div>
    <br />
<!--案例1-->
    <div class="lixian1">
        <a href="#" target="_blank">成长守护平台</a>
    </div>
<!--背景图像固定与滚动-->
    <div class="image1">

    </div>
</body>
</html>